<template>
  <h1>EL-开关组件</h1>
  <!-- switch: 切换 -->
<!-- 开关的颜色默认为 开为蓝色 关为灰色 -->
<!-- 开关标签的属性值为布尔类型 因此响应式变量与之绑定时设置的属性值应为true开 false关 -->
  <el-switch v-model="value1"/>
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <el-switch
      v-model="value3"
      class="ml-2"
      style="--el-switch-on-color: #000000; --el-switch-off-color: #ffffff"
  />
  <hr>
<!-- 开关的连锁反应 思路: 将开关和 -->
  <b>是否为管理员:</b>
  <el-switch v-model="isAdmin"></el-switch> <br>
  <span v-if="isAdmin"><b>你真牛逼,我勒个豆儿太有实力了</b></span>
  <hr>
  <b>是否显示图片:</b>
  <el-switch v-model="isShow"></el-switch> <br>
  <img src="fcq.jpg" width="100px" v-if="isShow">
  <hr>
<!--
  拓展型value 支持字符串 布尔 数字类型的属性值 用以区分开关
  用户可以根据
    :active-value="1"/"'1'"/"'开'"/true 开启状态属性值
    :inactive-value="0"/"'0'"/"'关'"/false 关闭状态属性值
             (数字类型/字符串类型/字符串类型/布尔类型)
  分别表示开和关
-->
  <el-switch v-model="numController" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="strController1" :active-value="'1'" :inactive-value="'0'"></el-switch>
  <el-switch v-model="strController2" :active-value="'开'" :inactive-value="'关'"></el-switch>
</template>

<script setup>
import {ref} from 'vue'

const value1 = ref(true)
const value2 = ref(true)
const value3 = ref(true)

const isAdmin = ref(false)
const isShow = ref(false)

const numController = ref(1)
const strController1 = ref('0')
const strController2 = ref('开')
</script>

<style scoped>

</style>